require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/fonts/iconfont.css");
require("../../assets/css/tabbar.less");
require("../../assets/css/navbar.less");
require("./sports_course.less");

// 引入模块
let dom = require("../../utils/dom.js");
let axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	// 1.底部导航
	dom.tabbar("sport");
	// 2.顶部导航
	dom.navbar("course");
	// 3.渲染数据到课程训练页面
	axios.get("/api/train/courseList").then(res => {
		// console.log(res);
		let data = res.data.data; //获取课程列表数组
		let newCourse = data.shift(); //返回得到删除数组后开头的第一个元素
		// 渲染最新课程图片,标题,说明文字
		dom.get("#newCourse img").src = axios.defaults.baseURL + newCourse.imgurl;
		dom.get("#newCourse h4").textContent = newCourse.name;
		dom.get("#newCourse p").textContent = newCourse.desc.slice(0, 18);
		dom.get("#newCourse a").href =
			"sports_course_detail.html?id=" + newCourse.courseId;
		//渲染课程列表
		let html = "";
		data.forEach(v => {
			html += `
					 <li>
						 <a href="sports_course_detail.html?id=${v.courseId}">
							 <img src="${axios.defaults.baseURL + v.imgurl}">
							 <h4>${v.name}</h4>
							 <p>${v.desc.slice(0, 18)}</p>
						 </a>
					 </li>
				 `;
		});
		dom.get("#classes ul").innerHTML = html;
	});
});
